$(function(){
	$(document).on('click','.con_left ul li',function(){
		$(this).addClass('toggle').siblings().removeClass('toggle');
		var i = $(this).index();
		$('.con_right>div').eq(i).show(100).siblings().hide(100);
	})
	$('.con_right ul li>div').hover(function(){
		$(this).find('ul').stop().slideDown()
	},function(){
		$(this).find('ul').stop().slideUp()
	})
	$(document).on('click','.con_right ul li ul li',function(){
		var index = $(this).text();
		$(this).parent('ul').siblings('span').text(index)
	})
	
	//	柱状图
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '堆叠柱状图';
	var posList = [
		'left', 'right', 'top', 'bottom',
		'inside',
		'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
		'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
	];

	app.configParameters = {
		rotate: {
			min: -90,
			max: 90
		},
		align: {
			options: {
				left: 'left',
				center: 'center',
				right: 'right'
			}
		},
		verticalAlign: {
			options: {
				top: 'top',
				middle: 'middle',
				bottom: 'bottom'
			}
		},
		position: {
			options: echarts.util.reduce(posList, function(map, pos) {
				map[pos] = pos;
				return map;
			}, {})
		},
		distance: {
			min: 0,
			max: 100
		}
	};
	app.config = {
		rotate: 90,
		align: 'left',
		verticalAlign: 'middle',
		position: 'insideBottom',
		distance: 15,
		onChange: function() {
			var labelOption = {
				normal: {
					rotate: app.config.rotate,
					align: app.config.align,
					verticalAlign: app.config.verticalAlign,
					position: app.config.position,
					distance: app.config.distance
				}
			};
			myChart.setOption({
				series: [{
					label: labelOption
				}, {
					label: labelOption
				}, {
					label: labelOption
				}, {
					label: labelOption
				}]
			});
		}
	};

	var labelOption = {
		normal: {
			show: true,
			position: app.config.position,
			distance: app.config.distance,
			align: app.config.align,
			verticalAlign: app.config.verticalAlign,
			rotate: app.config.rotate,
			//					formatter: '{c}  {name|{a}}',
			fontSize: 16,
			rich: {
				name: {
					textBorderColor: '#fff'
				}
			}
		}
	};
	option = {
		tooltip: {
			trigger: 'axis',

			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},

		color: ['#07a6fa', '#ff9a51', '#90EE90'],
		legend: {
			left: 'right',
			data: ['预算总计', '已使用']
		},
		axisLabel: {
			interval: 0,
			rotate: 40
		},
		grid: {
			left: '3%',
			right: '1%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			"axisLabel": {
				interval: -10,
				rotate: -40,
			},
			data: ['设备费用', '材料费', '测试化验/加工计算分析费', '燃料动力费', '差旅费', '国际合作与交流费', '劳务费', '专家咨询费', '其他费用']
		}],
		yAxis: {
			min: 100,
			max: 60000,
		},
		series: [{
				name: '预算总计',
				type: 'bar',
				label: labelOption,
				data: [42402, 32402, 301, 334, 590, 530, 520, 500]
			},
			{
				name: '已使用',
				type: 'bar',
				label: labelOption,
				barGap: '0%',
				barWidth: 30, //柱图宽度
				data: [32402, 22402, 201, 154, 190, 330, 410, 300]
			}
		]
	};;
	if(option && typeof option === "object") {
		myChart.setOption(option, true);
	};
	
})
